<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--  选择一个-->
  <div>
    <select name="abc" v-model="fruit">
      <option value="苹果" >苹果</option>
      <option value="香蕉" >香蕉</option>
      <option value="西瓜" >西瓜</option>
    </select>
    <h2>{{fruit}}</h2>
  </div>

<!--  多选-->
<!--  <div>-->
    <select name="abc" v-model="fruits" multiple>
      <option value="苹果" >苹果</option>
      <option value="香蕉" >香蕉</option>
      <option value="西瓜" >西瓜</option>
    </select>
    <h2>{{fruits}}</h2>
  </div>

<!--  值绑定-->
  <label v-for="item in orignhb ">
    <input type="checkbox" :value="item" v-model="fruits">{{item}}
  </label>
</div>

<script src="../js/vue.js"></script>
<script>
    const  app = new Vue({
      el:'#app',
      data:{
        message: '卢本伟牛逼！',
        fruit:'',
        fruits: [],
        orignhb:['足球','篮球','排球']
      }
    })
</script>
</body>
</html>